<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Hope2</title>

    <link rel="stylesheet" href="https://lib.baomitu.com/bulma/0.9.1/css/bulma.css">
    <link rel="shortcut icon" href="/favicon.ico">
    <script src="https://lib.baomitu.com/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://code.highcharts.com.cn/highstock/8.2.2/highstock.js"></script>
    <script src="https://code.highcharts.com.cn/highstock/8.2.2/modules/exporting.js"></script>
    <script src="https://code.highcharts.com.cn/highstock/8.2.2/modules/data.js"></script>
    <script src="https://code.highcharts.com.cn/highcharts-plugins/highcharts-zh_CN.js"></script>

    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.3/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.3/js/bootstrap.min.js"></script>
    <script src="js/bootstrap-suggest.js"></script>
    <script>
        var options = {
            chart: {
                renderTo: 'chart-container',
                type: 'spline'
            },
            title: {
                text: '买入策略回溯',
            },
            xAxis: {
                categories: []
            },
            series: [
                {
                    name: 'r1'
                },
                {
                    name: 'r2'
                }
            ]
        };

        function post() {
            var code = $("#code").val();
            $.getJSON('backtracking/' + code + '?startDate=2005-02-04', function (data) {
                options.xAxis.categories = data.category;
                options.series[0].data = data.r1;
                options.series[1].data = data.r2;
                var chart = new Highcharts.Chart(options);
            });
        }

        $(document).ready(function () {
            $("#code").bsSuggest({
                indexId: 0, //data.value 的第几个数据，作为input输入框的内容
                indexKey: 0, //data.value 的第几个数据，作为input输入框的内容
                allowNoKeyword: false, //是否允许无关键字时请求数据。为 false 则无输入时不执行过滤请求
                multiWord: true, //以分隔符号分割的多关键字支持
                separator: ",", //多关键字支持时的分隔符，默认为空格
                getDataMethod: "url", //获取数据的方式，总是从 URL 获取
                showHeader: false, //显示多个字段的表头
                ignorecase: true,
                showBtn: false, //不显示下拉按钮
                autoDropup: false, //自动判断菜单向上展开
                effectiveFieldsAlias: {code: "代码", name: "名称"},
                url: "http://127.0.0.1:8002/search?word=",
                fnProcessData: function (json) {
                    var index,
                        len,
                        data = {value: []};

                    if (!json || !json.symbols || !json.symbols.length) {
                        return false;
                    }

                    len = json.symbols.length;

                    for (index = 0; index < len; index++) {
                        data.value.push({
                            code: json.symbols[index].code,
                            name: json.symbols[index].name
                        });
                    }
                    console.log("股票搜索API: ", data);
                    return data;
                }
            })
                .on("onDataRequestSuccess", function (e, result) {
                    console.log("onDataRequestSuccess: ", result);
                })
                .on("onSetSelectValue", function (e, keyword, data) {
                    console.log("onSetSelectValue: ", keyword, data);
                })
                .on("onUnsetSelectValue", function () {
                    console.log("onUnsetSelectValue");
                });

        });
    </script>
</head>
<body class="layout-default">
<nav id="navbar" class="bd-navbar navbar has-shadow is-spaced">
    <div class="container">
        <div class="navbar-brand">
            <a class="navbar-item" href="https://qianyitian.com/">
                <img style="height:36px;width:36px;" src="https://img.qianyitian.com/icon/logo.png" >  <h4 class="title is-3">Hope2</h4>
            </a>
        </div>
    </div>
</nav>

<section class="section">
    <div class="container">
        <div class="columns">
            <div class="column is-3">
                <div class="field">
                    <label class="label">股票代码</label>
                    <div class="input-group">
                        <input type="text" class="form-control" id="code">
                        <div class="input-group-btn">
                            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                                <span class="caret"></span>
                            </button>
                        </div>
                    </div>
                </div>
                <div class="field is-grouped">
                    <div class="control">
                        <button class="button is-link" onclick="post()">提交</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>


<section class="section">
    <div id="chart-container" style="min-width:400px;height:400px"></div>
</section>

<section class="section">
    <div class="container">
        <div>
            初始资金100万。
        </div>
        <div>
            r1版本：如果MACD大于0，并且价格大于30天均线，买入或者持有。如果MACD<0 或者 价格小于30天均线，卖出或者空仓。
        </div>
        <div>
            r2版本：第一个交易日买入，并一直持有。
        </div>
    </div>
</section>
<hr>
</body>
</html>